<template>
	<z-paging ref="paging" bg-color="#F4F6F8" v-model="list" @query="getPageList" empty-view-text="暂无数据"
		:empty-view-img-style="{width:'150rpx',height:'150rpx'}" :empty-view-title-style="{marginTop: '30rpx'}">
		<template #refresher="{refresherStatus}">
			<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
			<custom-refresher :status="refresherStatus" />
		</template>
		<template #top>
			<view class="my-bg">
				<view class="pad-24">
					<view class="font-30 mar-bottom-20 betweenX">
						<view></view>
						<view class="centerY">
							<view class="mar-right-20" @click="hanldeAddOrder">新增抬头</view>
							<view @click="hanldeInvoiceLog">申请记录</view>
						</view>
					</view>
					<view class="bg-white radius20 pad-20">
						<view class="form-box font-34">
							<up-form class="mar-top-30" labelWidth="80" :model="formData" ref="ruleFrom">
								<up-form-item label="发票抬头" prop="invoice_title_id">
									<view class="mar-left-10 picker betweenX" @click="isPicker = true">
										<view class="color-646464">{{invoice_title}}</view>
										<up-icon name="arrow-down" size="24rpx"></up-icon>
									</view>
									<up-picker @cancel="isPicker = false" @confirm="hanldeConfirm" :show="isPicker"
										:columns="titleList" keyName="name"></up-picker>
								</up-form-item>

								<up-form-item label="缴费类型" prop="ref_type">
									<up-radio-group v-model="formData.ref_type" @change="hanldeRadioGroup">
										<up-radio :customStyle="{marginBottom: '8px'}" label="水费" :name="1" />
										<up-radio :customStyle="{marginBottom: '8px'}" label="其它收费" :name="2" />
									</up-radio-group>
								</up-form-item>
								<up-form-item v-if="formData.ref_type == 1" label="户头:" prop="invoice_title_id">
									<view class="mar-left-10 picker betweenX" @click="isUserPicker = true">
										<view class="color-646464">{{userInfo?.holder_username}}</view>
										<up-icon name="arrow-down" size="24rpx"></up-icon>
									</view>
									<up-picker @cancel="isUserPicker = false" @confirm="hanldePickerConfirm"
										:show="isUserPicker" :columns="[userList]"
										keyName="holder_username"></up-picker>
								</up-form-item>
							</up-form>
						</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 水表 -->
		<invoiceMonthly @change="hanldeRefId" v-if="formData.ref_type == 1" :list="list"></invoiceMonthly>
		<invoiceOder @change="hanldeRefId" v-else-if="formData.ref_type == 2" :list="list"></invoiceOder>

		<template #bottom>
			<view class="pad-24">
				<view @click="submit" class="button-style">确认开票</view>
			</view>
		</template>
	</z-paging>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { monthlyReport } from '@/api/index.js';
	import { getInvoiceTitle, addInvoiceApply, userMeterAll, orderList } from '@/api/user.js';

	const ruleFrom = ref(null);
	const param = ref({});
	const isPicker = ref(false);
	const isUserPicker = ref(false);
	const list = ref([]);
	const titleList = ref([]);
	const invoice_title = ref("请选择发票抬头");
	const ref_title = ref([]);
	const invoice_title_id = ref('');
	const paging = ref(null);
	const formData = reactive({
		ref_type: 1
	})
	const userInfo = ref({});
	const userList = ref([]);
	const saveId = ref([]);


	const hanldeAddOrder = () => {
		uni.navigateTo({
			url: "/pages/my_actions/invoice/invoice"
		})
	}

	// 确定切换户头
	const hanldePickerConfirm = (e) => {
		userInfo.value = e.value[0];
		isUserPicker.value = false;
		getPageList(1, 10);
	}

	// 获取所以水表
	const getUserMeterAll = () => {
		userMeterAll().then(res => {
			if (res?.code == 200) {
				userList.value = res?.data?.lists.map(item => {
					return { ...item, ...item.water_meter }
				});
				userInfo.value = userList.value[0];
				getPageList(1, 10);
			}
		})
	}

	// 获取月度报表
	const getPageList = (page, pageSize) => {
		if (formData.ref_type == 1) {
			if (userList.value.length > 0) {
				monthlyReport({
					page,
					ps: pageSize,
					water_meter_id: userInfo.value.water_meter_id,
					settle_status: 1,
					applied_invoice: 2
				}).then(res => {
					if (res?.code == 200) {
						paging.value.complete(res.data.data);
					} else {
						paging.value.complete(false);
					}
				})
			}
		} else {
			// 订单
			orderList({
				page,
				ps: pageSize,
				applied_invoice: 2,
				pay_status: 3,
				order_type: 2
			}).then(res => {
				if (res?.code == 200) {
					paging.value.complete(res.data.data);
				} else {
					paging.value.complete(false);
				}
			})
		}
	}

	// 跳转申请记录
	const hanldeInvoiceLog = () => {
		uni.navigateTo({
			url: '/pages/my_actions/invoiceLog/invoiceLog'
		})
	}

	// 响应式数据  
	const cateId = ref('');
	const getInvoiceTitleAll = () => {
		getInvoiceTitle().then(res => {
			if (res?.code == 200) {
				titleList.value = [res.data.lists];
			}
		})
	}

	// 切换状态回调
	const hanldeRadioGroup = (e) => {
		ref_title.value = "";
		list.value = [];
		if (e == 1) {
			getUserMeterAll();
		} else {
			getPageList(1, 10);
		};
	}

	// 确定选择
	const hanldeConfirm = (e) => {
		invoice_title.value = e.value[0].name;
		invoice_title_id.value = e.value[0].id;
		isPicker.value = false;
	}

	// 选择需要开票的
	const hanldeInvoiceOder = () => {
		if (formData.ref_type == 2) {
			uni.navigateTo({
				url: '/pages/my_actions/invoiceOder/invoiceOder'
			})
		} else {
			uni.navigateTo({
				url: '/pages/my_actions/invoiceMonthly/invoiceMonthly'
			})
		}
	}

	// 获取选中id
	const hanldeRefId = (e) => {
		saveId.value = e;
	};

	// 提交
	const submit = () => {
		if (invoice_title_id.value == '') {
			uni.$u.toast('请选择发票抬头');
			return;
		}

		if (saveId.value.length <= 0) {
			uni.$u.toast('请选择需要开票的id');
			return;
		}

		addInvoiceApply({
			invoice_title_id: invoice_title_id.value,
			ref_type: formData.ref_type,
			ref_ids: saveId.value
		}).then(res => {
			uni.$u.toast(res.msg);
			uni.navigateBack();
		}).catch(err => {})
	}

	onLoad(() => {
		getInvoiceTitleAll();
		getUserMeterAll();
	})
</script>

<style scoped lang="scss">
	.my-bg {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/111ba83702f882f08421c066eb85f6f6.png');
		background-size: 100% 489rpx;
		background-color: #F7F8FA;
		background-repeat: no-repeat;
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	.button-style {
		padding: 21rpx 0;
		text-align: center;
		margin-top: 82rpx;
	}

	.button-code {
		padding: 7rpx 10rpx;
		background: $uni-color-primary;
		color: white;
		border-radius: 4rpx;
	}

	.picker {
		width: 240px;
		border: 1rpx solid #D5D5D5;
		min-height: 72rpx;
		line-height: 72rpx;
		border-radius: 6rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.ref_title {
		white-space: normal;
		/* 允许换行 */
		word-wrap: break-word;
		/* 或者使用 overflow-wrap: break-word; */
	}
</style>